<template>
  <!-- 首页 每个楼层的标题 都由这个组件保管 非常nice的组件 这个组件作为插槽内容填充 -->
  <div class="sm-title" :style="styles">
    <div class="title-l">
      <h2>{{ title }}</h2>
      <ul class="cate-menu" v-if="cates">
        <li class="cate-menu-item" v-for="c in cates.cates" :key="c">
          <router-link :to="to" class="cate-menu-lk">{{ c }}</router-link>
          <span class="cate-menu-sub">&nbsp;|&nbsp;</span>
        </li>
      </ul>
    </div>
    <div class="title-r" :style="`display:${display}`">
      <router-link :to="to">更多</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "SmTitle",
  props: {
    /* 是否显示更多 */
    display: {
      tyoe: String,
      default: "block",
    },
    /* 分类数据 */
    cates: {
      type: Object,
    },
    /* 标题 */
    title: {
      type: String,
      default: "未知的标题",
    },
    /* 样式 */
    styles: {
      type: Object,
    },
    /* 路由 */
    to: {
      type: String,
      default: "/",
    },
  },
};
</script>

<style lang="less" scoped>
.sm-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  padding-bottom: 0.2rem;
  .title-l {
    display: flex;
    align-items: center;
    .cate-menu {
      margin-left: 0.2rem;
      display: flex;
      .cate-menu-item {
        color: #909399;
        &:hover .cate-menu-lk {
          color: #ffcff1;
        }
        .cate-menu-lk {
        }
      }
    }
    h2 {
      font-size: 0.5rem;
      font-weight: normal;
    }
  }
  .title-r {
    &:hover a {
      color: #ffcff1;
    }
  }
}
@media screen and (max-width: 375px) {
  .sm-title {
    .title-l {
      .cate-menu {
        display: none;
      }
    }
  }
}
</style>